<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>构建卡组</title>
    <link rel="stylesheet" href="css/deck-builder.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="icon" href="logo.svg" type="image/svg+xml">
</head>

<body>
    <div class="header">
        <button class="back-button" onclick="goBackToDeckBag()">← 返回卡牌背包</button>
    </div>

    <div class="container">
        <div class="deck-header">
            <div class="deck-name" id="deckName">新卡组</div>
            <button class="edit-name" onclick="editDeckName()">修改名称</button>
        </div>

        <div class="deck-content">
            <div class="card-section">
                <div class="section-title">角色</div>
                <div class="card-list" id="roleList"></div>
            </div>
            <div class="card-section">
                <div class="section-title">在场角色卡</div>
                <div class="candidate-scroll-container">
                    <div class="card-list" id="fieldRoleList"></div>
                </div>
            </div>
            <div class="card-section">
                <div class="section-title">角色装备卡</div>
                <div class="candidate-scroll-container">
                    <div class="card-list" id="roleWeaponList"></div>
                </div>
            </div>
            <div class="card-section">
                <div class="section-title">在场角色装备卡</div>
                <div class="candidate-scroll-container">
                    <div class="card-list" id="fieldWeaponList"></div>
                </div>
            </div>
            <div class="card-section">
                <div class="section-title">行动卡</div>
                <div class="candidate-scroll-container">
                    <div class="card-list" id="actionList"></div>
                </div>
            </div>
        </div>

        <div class="candidate-section">
            <div class="candidate-cards">
                <div class="candidate-title">候选角色</div>
                <div class="candidate-scroll-container">
                    <div class="candidate-list" id="candidateRoles"></div>
                </div>
            </div>
            <div class="candidate-cards">
                <div class="candidate-title">候选卡牌</div>
                <div class="candidate-scroll-container">
                    <div class="candidate-list" id="candidateCards"></div>
                </div>
            </div>
        </div>

        <button class="save-button" onclick="saveDeck()">保存卡组</button>
        <button class="delete-button" onclick="deleteDeck()">删除卡组</button>
    </div>

    <script src="js/common.js"></script>
    <script src="js/deck-builder.js"></script>

</body>

</html>